<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Wallet Baristas</title>

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<script type="text/javascript"
        language="javascript"
        src="{{js_url}}">
</script>

<script type="text/javascript"
        language="javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>

<script type="text/javascript">
//////////////////////////////////////////////////////////////////////
// Wallet control
//////////////////////////////////////////////////////////////////////
//

$(function() {
  $("#ajaxSpinner").hide();
});

function successMaskedWallet(jwt) {
  console.log("masked wallet handler begin");
  $("#ajaxSpinner").show();
  
  log('--------------------------');
  log("Handling the masked wallet.");
  log(jwt);

  // populate the hidden form field with the masked wallet contents
  $("#maskedWalletJWT").val(jwt);

  $("#ajaxSpinner").hide();
  console.log("masked wallet handler end");
  
  // submit the form
  document.forms["purchaseDetailsForm"].submit();
}

function failureMaskedWallet(error, detail) {
    $("#ajaxSpinner").show();
    log('--------------------------');
    log("There was an error getting the masked wallet: " + error + "\n" + detail);
    $("#ajaxSpinner").hide();
}


//////////////////////////////////////////////////////////////////////
// Menu control
//////////////////////////////////////////////////////////////////////

var items = [
  ['Category', 'Item', 'Small', 'Medium', 'Large'],
  ['The Classics', 'White Mocha', 3.15, 3.7, 4.2],
  ['The Classics', 'Mocha', 2.85, 3.35, 3.85],
  ['The Classics', 'Caramel Latte', 2.9, 3.45, 4],
  ['The Classics', 'Vanilla Latte', 2.75, 3.35, 3.5],
  ['The Classics', 'Caffe Latte', 2.6, 3.05, 3.5],
  ['Our Favorites', 'Cherry Bomb Mocha', 3.7, 4.25, 4.7],
  ['Our Favorites', 'Rocky Road Mocha', 3.5, 4.05, 4.55],
  ['Our Favorites', 'Coconut Mocha', 3.3, 3.95, 4.5],
  ['Our Favorites', 'Irish Cream Mocha', 3.3, 3.95, 4.5],
  ['Our Favorites', 'White Berry Mocha', 3.35, 3.9, 4.45],
  ['Chai and Teas', 'Spiced Chai Latte', 2.5, 3, 3.5],
  ['Chai and Teas', 'Golden Chai Latte', 2.5, 3, 3.5],
  ['Chai and Teas', 'Almond Chai Latte', 2, 3.3, 3.8],
  ['Chai and Teas', 'Vanilla Chai Latte', 2, 3.3, 3.8],
  ['Chai and Teas', 'Spiced Chai Mocha', 2.95, 3.45, 3.95]
];

function generateMenu() {
  // populate the drink types
  var drinkSelector = document.getElementById('drinkSelector');
  drinkSelector.options.length = 0;
  for (var i = 1; i < items.length; i++) {
    drinkSelector.options[i-1] = new Option(items[i][1]);
  }

  // populate drink sizes
  var sizeSelector = document.getElementById('sizeSelector');
  sizeSelector.options.length = 0;
  for (var i = 2; i < items[0].length; i++) {
    sizeSelector.options[i-2] = new Option(items[0][i]);
  }
}

function updateTotal() {
  log("in updateTotal");

  var drink = document.getElementById("drinkSelector").selectedIndex;
  var size = document.getElementById("sizeSelector").selectedIndex;
  log("drink=" + drink + "  size="+size);
  var drinkPrice = items[drink+1][size+2];
  log("drinkPrice=" + drinkPrice);

  document.getElementById('totalval').innerHTML = "$" + drinkPrice.toFixed(2);
  log('set totalVal');
  document.getElementById('formTotal').value = drinkPrice.toFixed(2);
  log('set formTotal');
  log("formTotal='" + document.getElementById('formTotal').value + "'");
}

function initMenu(){
  generateMenu();

  if(document.location.hash){
    // set the initial menu item
    var drinktype = document.location.hash;
    drinktype = drinktype.replace("#","");

    var drinkSelector = document.getElementById("drinkSelector");
    drinkSelector.selectedIndex = drinktype;
  }

  updateTotal();
}

function log(msg) {
  if (console && console.log) {
    console.log(msg);
  }
}

//////////////////////////////////////////////////////////////////////
// Run initializers on page load
//////////////////////////////////////////////////////////////////////

function onLoadFunc() {
  initMenu();
}

window.onload = onLoadFunc;

</script>


</head>
<body>
  <div id="header">
    <h1>Wallet Baristas</h1>
  </div>

  <form id="purchaseDetailsForm" name="purchaseDetailsForm" action="confirm" method="post">
  <div id="finish_order">
    <h2>Customize It</h2>
    <div class="setting">
      <h3>Type</h3>
      <select name="drink" id="drinkSelector" onchange="updateTotal();">
      </select>
    </div>
    <div class="setting">
      <h3>Size</h3>
      <select name="size" id="sizeSelector" onchange="updateTotal();">
      </select>
    </div>

    <div class="setting">
      <h3>With milk?</h3>
      <select name="milk" id="milkSelector">
        <option>none</option>
        <option>Soy milk</option>
        <option>Nonfat milk</option>
        <option>2% milk</option>
        <option>Whole milk</option>
      </select>
    </div>

    <div class="setting">
      <h3>Ready for it...</h3>
      <select name="pickup" id="pickupSelector">
        <option>Now</option>
        <option>5 min</option>
        <option>10 min</option>
        <option>15 min</option>
        <option>30 min</option>
      </select>
    </div>

    <div id="totalBar">
      <div id="ajaxSpinner">
        <img src="ajax-loader.gif">
      </div>
      <div><g:wallet id="submit" jwt="{{masked_wallet_request_jwt}}" mode="useDefaults" onSuccess="successMaskedWallet(jwt)" 
              onFailure="failureMaskedWallet(error, detail)"></g:wallet></div>
      
      <span id="total">Total: <em><span id="totalval">$0.00</span></em></span>
      <input type="hidden" name="formTotal" id="formTotal" value=0>
      <input type="hidden" name="maskedWalletJWT" id="maskedWalletJWT" value="">
    </div>
    <div><span style="float:right;padding-right:10px;"><b>Do not use your real credit cards</b></span></div>
  </div>
  </form>
</body>
</html>
